<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="我的佣金">
	</u-navbar>
  <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
    <view style="position: relative">
      <view class="padding-30rpx scroll-item">
        <view style="position: relative">
          <image style="width: 100%; height: 203px;" src="@/static/image/mine/order-bg.png" mode=""></image>
          <view class="commission-header-content">
            <view style="font-size: 12px;margin-top: 20px;font-family: 'PingFang SC-Medium',sans-serif; ">总佣金</view>
            <view class="" style="padding: 9px 0 9px 0;font-family: 'DIN Alternate',sans-serif;">
              <text style="font-size: 15px;margin-right: 5px">￥</text>
              <text style="font-size: 35px;">{{data.info.totalPrice || 0}}</text>
            </view>
            <view class="flex-jc-s-b" style="width: 100%;">
              <view class="flex-al-center" style="margin-left: 28px;">
                <text style="font-family: 'PingFang SC-Medium',sans-serif;" >报名佣金(元)：</text>
                <text style="font-size: 19px;font-family: 'DIN Alternate',sans-serif;">{{data.info.signUpPrice || 0}}</text>
              </view>
              <view class="flex-al-center" style="margin-right: 38px;">
                <text style="font-family: 'PingFang SC-Medium',sans-serif;">推荐佣金(元)：</text>
                <text style="font-size: 19px;font-family: 'DIN Alternate',sans-serif;">{{data.info.takeFromChildPrice || 0}}</text>
              </view>
            </view>
            <view style="width: 90%;margin: 15px 0 10px 0;border: 1px solid #FFFFFF;opacity: 0.2;"></view>
            <u-button
                @click="goWithdraw"
                :customStyle="{'background': 'linear-gradient(90deg, #9ADCFF 0%, #97CAFF 100%)','width':'90px', 'height': '32px','margin':'0 0 10px 0','fontSize':'14px'}"
                type="primary" shape="circle">
              <view class="flex-center" style="margin-left: 6px">
                <text>去提现</text>
                <u-icon name="arrow-right" color="#fff " size="28"></u-icon>
              </view>
            </u-button>
          </view>
        </view>

        <!-- 列表 -->
        <view class="padding-30rpx white-bg" style="margin-top: 15px;border-radius: 8px;padding-bottom: 0;height: auto">
          <view class="flex-jc-s-b" style="font-size: 14px;margin-bottom: 15px">
            <text style="font-weight: 600;">佣金明细</text>
            <view class="flex-center" @click="data.selectShow = true">
              <image style="width: 12px;height: 12px;;" src="@/static/image/mine/filter.png" mode=""></image>
              <text style="margin-left: 5px;">筛选</text>
            </view>
          </view>
          <u-popup :closeable="!true" mode="bottom" :round="8" :show="data.selectShow"
                   @close="data.selectShow=false">
            <view class="" style="height: 306px;padding: 15px;">
              <view class="flex-jc-s-b">
                <text style="font-weight: bold;font-size: 14px;margin-top: 10px;
                    font-family: PingFang SC-Bold, PingFang SC;">类型</text>
                <view class="" style="transform: translateY(-8px);" @click="data.selectShow=false">
                  <u-icon name="close" color="#999999 " size="22"></u-icon>
                </view>
              </view>
              <view class="flex-al-center" style="margin-top: 15px;">
                <view class="label-icon" :class="data.request.typeCode=='takeFromChild'?'active-label':'inactive-label'"
                      @click="data.request.typeCode='takeFromChild'">
                  <text>推荐</text>
                  <image v-if="data.request.typeCode=='takeFromChild'" class="label-img" style=""
                         src="@/static/image/mine/active.png" mode="">
                  </image>
                </view>
                <view :class="data.request.typeCode=='signUp'?'active-label':'inactive-label'"
                      @click="data.request.typeCode='signUp'" class="label-icon" style="margin-left: 10px;">
                  <text>报名</text>
                  <image v-if="data.request.typeCode=='signUp'" class="label-img" style=""
                         src="@/static/image/mine/active.png" mode="">
                  </image>
                </view>
              </view>
              <view class="flex-jc-s-b" style="margin: 20px 0 15px 0;">
                <text style="font-weight: bold;font-size: 14px;margin-top: 10px;
						font-family: PingFang SC-Bold, PingFang SC;">日期</text>
              </view>
              <view class="flex-jc-s-b" style="color: #D3D3D3 ;font-size: 15px;">
                <text class="date-text" @click="data.dateShow=true">{{data.request.payDateStart||'开始日期'}}</text>
                <view class="" style="background-color: #333333 ;height: 1px;width: 8px;margin: 0 8px;">
                </view>
                <text class="date-text" @click="data.dateShow=true">{{data.request.payDateEnd||'结束日期'}}</text>
              </view>
              <view class="flex-jc-s-b" style="margin-top: 25px;margin-bottom: 15px">
                <u-button shape='circle'
                          :customStyle="{width: '170px',height: '40px','margin':'0 9px 0 0',padding:'0',border:'1px solid #F7F7F7'}"
                          type="" @click="clearRequest" text="重置">
                </u-button>
                <u-button shape='circle'
                          :customStyle="{width: '170px',height: '40px','margin':'0 0 0 9px',padding:'0'}"
                          type="primary" @click="data.list=[],paging(),data.selectShow = false" text="确定">
                </u-button>
              </view>
            </view>
          </u-popup>
          <u-calendar :startText="''" :endText="''" :closeOnClickOverlay="true" :show="data.dateShow" mode="range"
                      :monthNum="99999" :minDate="data.minDate" :maxDate="data.maxDate"
                      @close="data.dateShow=false" @confirm="confirm"></u-calendar>
          <empty :config="{text: '您还没有佣金记录'}" v-if="data.list.length === 0" />
          <view v-else class="flex-jc-s-b" v-for="(item,index) in data.list"
                style="font-size: 12px;color: #999999;padding: 15px 0;"
                :class="index!==data['list'].length-1?' mine-cell': ''"
                @click="goDetail(item)">
            <view class="flex-jc-start">
              <view>
                <image v-if="item.typeCode!='signUp'" style="width: 30px;height: 30px;"
                       src="@/static/image/mine/recommend.png" mode="">
                </image>
                <image v-else style="width: 30px;height: 30px;"
                       src="@/static/image/mine/enroll.png" mode="">
                </image>
              </view>
              <view class="" style="transform: translateX(10px);">
                <view class="" style="margin-bottom: 7px;">
                  <!-- //类型编码 signUp 报名 takeFromChild 推荐 -->
                  <text style="color: #333333;font-size: 15px;font-weight: 500;margin-right: 5px;">{{item.typeCode!='signUp'?'推荐-'+item.dealSale : '报名-'+item.orderNum}}</text>
                  <!-- "fixed"-已经固定的 "flow"-变动的 -->
                  <text v-if="item.statusCode=='flow'" style="color: #409EFF;font-size: 11px;border: 1px solid;padding:1px 3px;border-radius: 2px">待结算</text>
                </view>
                <text>{{item.payTime||''}}</text>
              </view>
            </view>
            <view class="flex-column" style="width: auto;align-items: flex-end">
              <text style="color: #333333;font-size: 16px;font-weight: 500;">{{item.statusCode!=='flow' && item.price!==0?'+':''}}{{item.price||0}}</text>
              <text style="margin-top: 7px;">{{item.orderPrice + '*' + item.rate + '%'}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script setup>
	import { onMounted, reactive } from "vue";
	import { pagingApi, countApi } from './const.js'
  import pageRoute from '@/utils/pageRoute'
  import empty from '@/pages/components/empty.vue'
  import {getLastYear, getNextMonth} from '../../utils/timeStamp'
	const data = reactive({
		dateShow: false,
		selectShow: false,
    maxDate: getNextMonth(),
    minDate: getLastYear(),
		list: [],
		info: {},
		request: {
			"typeCode": "", //类型编码 signUp 报名 takeFromChild 推荐
			"payDateStart": "",
			"payDateEnd": "",
			"pageDomain": {
				"pageNum": "1",
				"pageSize": "5",
				"orderByColumn": "",
				"isAsc": "",
				"reasonable": ""
			}
		},
    resultTotal: 0
	})
	onMounted(() => {
		paging()
		info()
	})
	const clearRequest = () => {
		data.request.typeCode = ''
		data.request.payDateStart = ''
		data.request.payDateEnd = ''
		// data.selectShow = false
		paging()
	}
	const confirm = (date) => {
		if (date.length > 0) {
			data.request.payDateStart = date[0]
			data.request.payDateEnd = date[date.length - 1]
		}
		data.dateShow = false
	}
	const paging = () => {
		pagingApi(data.request).then((res) => {
      data.list.push(...res.rows)
      data.resultTotal = res.total || 0
    }).catch(() => {
      data.resultTotal = 0
    })
	}
	const info = () => {
		countApi().then((res) => {
      if(res.data && res.code === 200) {
        data.info = res.data
      }
		})
	}
  function goWithdraw() {
    pageRoute.route('pages/withdrawal/query')
  }
  function goDetail(item) {
    if(item.typeCode === 'signUp') {
      pageRoute.route('pages/order/detail', {id:item.orderId})
    }
  }
  function lower(e) {
    if ((data.resultTotal <= data.list.length) || data.resultTotal === 0) { return }
    data.request.pageDomain.pageNum++
    paging()
  }
</script>
<style lang="scss" scoped>
  .mine-cell {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
	.date-text {
		width: 160px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #E7E7E7;
	}

	.label-icon {
		width: 108px;
		height: 36px;
		background: #F6F6F6;
		border-radius: 2px;
		text-align: center;
		font-size: 15px;
		line-height: 36px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		position: relative;
	}

	.label-img {
		width: 28px;
		height: 17px;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.active-label {
		color: #409EFF !important;
		background: #EAF0FE !important;
	}
  .inactive-label {
    color: #333333 !important;
    background: #F6F6F6 !important;
  }

	.commission-header-content {
		width: 345px;
		position: absolute;
		font-weight: 500;
		color: #fff;
		font-size: 11px;
		top: 50%;
		left: 50%;
    transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// margin: 0 auto;
		z-index: 1;
	}
  .scroll-Y {
    height: calc(100vh - 74px);
  }
  .scroll-item {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
  }
  .scroll-view-item {
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    border: 1px solid red;
    font-size: 36rpx;
  }
</style>
